<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    var div1 = document.createElement("div")
    document.body.appendChild(div1)
    var div2 = document.createElement("div")
    document.body.appendChild(div2)
    var div3 = document.createElement("div")
    document.body.appendChild(div3)

    // var divAll = document.getElementsByTagName("div")
    // console.log(divAll)

    div1.style.width = "50px"
    div1.style.height = "50px"
    div1.style.backgroundColor = "black"
    div1.style.margin = "5px"
    div2.style.width = "50px"
    div2.style.height = "50px"
    div2.style.backgroundColor = "black"
    div2.style.margin = "5px"
    div3.style.width = "50px"
    div3.style.height = "50px"
    div3.style.backgroundColor = "black"
    div3.style.margin = "5px"

    var button = document.createElement("input")
    document.body.appendChild(button);
    button.type = "button"
    button.value = "点击变红"

    button.onclick = function (event) {
        event.preventDefault()
        div1.style.backgroundColor = "red"
        div2.style.backgroundColor = "red"
        div3.style.backgroundColor = "red"
    }
    var button2 = document.createElement("input")
    document.body.appendChild(button2);
    button2.type = "button"
    button2.value = "点击变黑"

    button2.onclick = function (event) {
        event.preventDefault()
        div1.style.backgroundColor = "black"
        div2.style.backgroundColor = "black"
        div3.style.backgroundColor = "black"
    }

    var button3 = document.createElement("input")
    document.body.appendChild(button3);
    button3.type = "button"
    button3.value = "点击消失"

    button3.onclick = function (event) {
        event.preventDefault()
        div1.style.backgroundColor = "white"
        div2.style.backgroundColor = "white"
        div3.style.backgroundColor = "white"
    }


</script>